<template>
  <dir>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href>商品分类</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>添加分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card v-loading="loading">
      <!-- 提示区域 -->
      <el-alert title="添加分类信息" type="info" center show-icon :closable="false"></el-alert>
      <!-- 表单区域 -->
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px">
        <el-form-item label="商品名称:" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="排列顺序:" prop="index">
          <el-input v-model="addForm.index" type="number"></el-input>
        </el-form-item>
        <el-form-item label="分类图片:">
          <!-- action 表示上传图片地址，后台api接口 -->
          <el-upload
            action="http://localhost:3000/api/uploadGoodsCategoryPic"
            :on-success="handleSuccess"
            :show-file-list="false"
            :disabled="false"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <img :src="categoryFileList" class="avatar" />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="addCategory">添加商品</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </dir>
</template>
<script>
import { delCategoryImg, addCategory, cloudToHttp } from '../../api/category/add.js'
export default {
  data() {
    return {
      loading: false,
      addForm: {
        name: '',
        fileid: '',
        index: ''
      },
      categoryFileList: '',
      //   表单验证规则
      addFormRules: {
        name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        index: [{ required: true, message: '请输入位置序号', trigger: 'blur' }]
      },
      //   图片上传组件的headers请求头对象（里面可以包含Token）
      headerObj: {
        Authorization: window.sessionStorage.getItem('token')
      }
    }
  },
  methods: {
    // 监听上传商品图片成功后事件
    handleSuccess(response, fileList) {
      console.log(response)
      console.log(fileList)
      //   console.log(response.data.file_id)
      if (!response.data.file_id) return this.$message.error('图片上传失败')
      // 上传成功后得到cloud路径，去转换http路径
      cloudToHttp(response.data.file_id).then(res => {
        console.log(res.data)
        if (res.data.httpUrl.length > 0) {
          this.categoryFileList = res.data.httpUrl[0].url
        }
      })
      // 4.删除云数据库里的图片文件
      delCategoryImg(this.addForm.fileid).then(res => {
        console.log(res.data)
        if (res.data.data.errmsg === 'ok') {
          this.$message.success('更新了上次的商品分类图片')
          this.addForm.fileid = response.data.file_id
        }
      })
      console.log(this.addForm)
    },
    addCategory() {
      if (!this.addForm.fileid) {
        return this.$message.error('请上传分类图片')
      }
      console.log(this.addForm)
      addCategory(this.addForm).then(res => {
        console.log(res)
        if (res.data.success) {
          this.$message.success('商品分类添加成功')
          this.$router.push('/category')
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.el-form {
  margin-top: 15px !important ;
}
.avatar {
  width: 100px;
  height: 100px;
  border: solid 1px #f2f6fc;
}
</style>
